<template>
  <div>
    <cj-popup v-model="showPoints" @close="clearPoint" class="c-bg-transparent">
      <div class="c-pt100">
        <img src="../../../../public/i/wap/course/gift.png" alt="" class="point-bg">
        <div class="c-ww500 c-m-0auto c-textAlign-c c-pb30 c-pt70 point-dialog">
          <div class="c-fstyle-i theme-fc c-mt56">
            <span class="c-fs76">{{rewardPoints}}</span>
            {{customPointName}}
          </div>
          <div class="c-fc-gray c-fs20 c-pt20 c-pb36">恭喜您获得</div>
          <div class="theme-bg c-fs28 c-fc-white c-ww350 c-hh72 c-lh72 c-m-0auto c-br36" @click="goPoint">立即查看</div>
        </div>
        <div class="c-fc-white icon iconfont c-fs48 c-lh c-pt40 c-textAlign-c" @click="clearPoint">&#xe84e;</div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
export default {
  name: 'pointGift',
  components: {
  },
  props: {
    showPoints: {
      type: Boolean,
      default: false,
    },
    rewardPoints: {
      default: 0,
      type: Number
    },
    prodId: {
      default: 0,
      type: Number
    }
  },
  computed: {},
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
    }
  },

  methods: {
    // 跳转积分明细
    goPoint() {
      this.$routerGo(this, "push", {
        path: `/member/myIntegral/integralDetail?tabIndex=-1`
      });
    },
    // 清除赠送积分
    clearPoint() {
      this.$emit('update:showPoints', false)
      sessionStorage.removeItem(this.prodId + 'rewardPoints');
    },
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>

<style scoped>
.point-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9rem;
  margin-left: -4.5rem;
}
.point-dialog {
  background: url('../../../../public/i/wap/course/bg.png') no-repeat;
  background-size: 100% 100%;
}
</style>